<template>
    <div class="login">

        <el-form ref="loginForm" class="login-bar" :model="loginParams" :rules="rules" status-icon label-width="120px">
            <!-- <h2 style="text-align: center;">登录</h2> -->
            <el-form-item label="用户名" prop="adminname">
                <el-input v-model="loginParams.adminname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="loginParams.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitHandler">登录</el-button>
                <el-button type="primary" @click="resetHandler">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script>
import { mapActions} from "vuex";

// 单独引入 (按需引入 -> 引入Message组件(函数组件) -> 函数,调用是显示组件)  => 可以在任何位置使用
/* import {Message} from 'element-ui';


console.log("Message",Message);

// Message({
//     message:"hello world",
//     type:"success"
// })

每个 type 定义了各自的方法，如 Message.success(options)  => 函数也是一个特殊的对象   
var msg = Message.success({
    message:"hello world",
    duration:0,
    showClose:true,
})

setTimeout(()=>{
    msg.close()
},2000);
 */






export default {
    name: "LoginView",
    data() {

        // 自定义校验函数 -> 失焦时触发 =>   1. 放到data函数中  2. 写成箭头函数
        let validatePass = (rule, value, callback) => {
            // this -> 指向当前组件实例
            // rule 校验的规则
            // value -> 校验时传入的值
            // callback 回调函数  
            //       callback(new Error('请输入数字值'));  校验失败-> 错误提示
            //       callback()  校验成功
            if (!value) {
                callback("请输入密码");
            } else if (value.length < 5 || value.length > 12) {
                callback("密码需要再5-12位之间");
            } else if (!/^\w{5,12}$/.test(value)) {
                callback("密码由数字,字母,下划线组成,5-12位");
            } else {
                callback();  // 校验成功
            }
        }


        return {
            loginParams: {
                adminname: "admin",
                password: "123456"
            },
            rules: {
                adminname: [
                    // required: true  必填
                    // message: 失败时提示信息
                    // trigger  验证方式(失焦)
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' },
                    { pattern: /^[a-zA-Z_]\w{4,11}$/, message: '用户名由数字,字母,下划线组成,5-12位,且不能以数字开头', trigger: 'blur' },
                ],
                password: [
                    // 自定义校验函数
                    { validator: validatePass, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        ...mapActions(["loginAndUpdateUserInfo"]),
        async submitHandler() {
            console.log("点击进行二次校验");

            // 1. 传入回调函数 -> 校验结束之后执行
            // this.$refs.loginForm.validate((bool)=>{
            //     console.log(bool);
            // })

            // 2. 传入回调函数 => 返回Promise实例,默认pending,校验成功=> fulfilled 校验失败 => rejected
            this.$refs.loginForm.validate().then((bool) => {
                console.log(bool);

                // 优化前
                /* adminLoginAPI(this.loginParams).then(res=>{ // 200
                    console.log("请求成功",res);  // 返回响应结果 => (code==200() /10003 / 100019)
                    // 响应结果(前端发生请求 -> 数据的增删改查 -> 返回响应结果( 200:成功  10003: 密码错误  10005:用户名未注册  100019: token已经过期 ))

                    // 手动处理  => 接口很多 -> 每个接口都处理 => 麻烦 (提前通过axios的响应拦截处理)
                    // let {code,message,data} = res;
                    // if(code == 200){ // 登录成功
                    //     alert(message);
                    // }else if(code == 10003){
                    //     alert(message);
                    // }else if(code == 10005){
                    //     alert(message);
                    // }else if(code == 10019){ // token已经过期-> 重新登录
                    //     alert(message);
                    // }
                }).catch(err=>{ // 300 400 500 或者 code != 200
                    console.log("请求失败",err);
                }) */

                // 代码没问题
                // 1. 先引入了api  adminLoginAPI -> 登录验证
                // 2. 引入了vuex的方法 updateUserInfo  => 更新数据到vuex
                // 3. 将数据存储到localStorage => authority
                /* adminLoginAPI(this.loginParams).then(res => { // status == 200  code ==200
                    console.log("请求成功,登录成功", res);  // 返回响应结果 => (code==200() /10003 / 100019)
    
                    this.$message.success("登录成功");
                    this.updateUserInfo(res.data); // 登录成功之后将数据同步到vuex

                    localStorage.setItem("authority",JSON.stringify(res.data));

                }).catch(err => { // 300 400 500 或者 code != 200
                    console.log("请求失败或登录失败", err.message);
                    // alert(err.message);
                    this.$message.error({
                        message:err.message,
                        duration:1000,
                        showClose:true,
                    });
                }) */

                // 
                this.loginAndUpdateUserInfo(this.loginParams).then(()=>{
                    this.$message.success("登录成功");

                    var {ReturnUrl} = this.$route.query;
                    console.log("ReturnUrl",ReturnUrl);
                    if(ReturnUrl){  // 从其他页面过来
                        this.$router.push(ReturnUrl);
                    }else{  // 普通登录
                        this.$router.push("/");
                    }

                }).catch(err => { // 300 400 500 或者 code != 200
                    console.log("请求失败或登录失败", err.message);
                    this.$message.error({
                        message:err.message,
                        duration:1000,
                        showClose:true,
                    });
                })


            }).catch(err => {
                console.log("err", err);
            })

            /* try{
                var bool = await this.$refs.loginForm.validate();
                console.log(bool);

            }catch(err){
                console.log("err",err);
            } */

        },
        resetHandler() {
            this.$refs.loginForm.resetFields();
        }
    }
}
</script>

<style  scoped>
.login {
    background: url("https://cas.1000phone.net/cas/images/login/bg.png") no-repeat center center / cover;
}

.login-bar {
    width: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 10px;
    padding-right: 50px;
    border-radius: 4px;

}
</style>